<template>
  <Modal
    :open="visible"
    title="删除聊天室"
    :confirm-loading="loading"
    @ok="handleConfirm"
    @cancel="handleCancel"
    ok-text="确认删除"
    cancel-text="取消"
    ok-type="danger"
  >
    <div class="delete-content">
      <div class="warning-icon">
        <ExclamationCircleOutlined style="color: #ff4d4f; font-size: 24px;" />
      </div>
      <div class="delete-message">
        <p>确定要删除聊天室 <strong>"{{ roomName }}"</strong> 吗？</p>
        <p class="warning-text">此操作不可撤销，聊天室中的所有消息将被永久删除。</p>
      </div>
    </div>
  </Modal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Modal, message } from 'ant-design-vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { Codewin } from '@/api/generated/Codewin'
import { useAuthStore } from '@/stores/modules/auth'

interface Props {
  visible: boolean
  roomId?: string
  roomName?: string
}

interface Emits {
  (e: 'update:visible', value: boolean): void
  (e: 'success'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const authStore = useAuthStore()
const loading = ref(false)

// 创建API实例
const api = new Codewin({
  baseURL: import.meta.env.VITE_API_BASE_URL || 'https://www.codewin.top',
  securityWorker: () => ({
    headers: {
      Authorization: `Bearer ${authStore.token}`
    }
  })
})

const handleConfirm = async () => {
  if (!props.roomId) {
    message.error('聊天室ID不存在')
    return
  }

  try {
    loading.value = true

    const response = await api.deleteChatRoom(props.roomId)

    if (response.data?.code === 0) {
      message.success('聊天室删除成功')
      emit('success')
      handleCancel()
    } else {
      message.error(response.data?.message || '删除失败')
    }
  } catch (error) {
    console.error('删除聊天室失败:', error)
    message.error('删除失败，请重试')
  } finally {
    loading.value = false
  }
}

const handleCancel = () => {
  emit('update:visible', false)
}
</script>

<style scoped>
.delete-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
}

.warning-icon {
  flex-shrink: 0;
}

.delete-message {
  flex: 1;
}

.delete-message p {
  margin: 0 0 8px 0;
  font-size: 14px;
  line-height: 1.5;
}

.delete-message p:last-child {
  margin-bottom: 0;
}

.warning-text {
  color: #666;
  font-size: 13px;
}

.delete-message strong {
  color: #ff4d4f;
}
</style>
